<template>
	<view class="flex-col page">
		<scroll-view scroll-y="true" v-if="list.length>0" style="height:calc(100vh)" @scrolltolower="loadmore">
			<view class="flex-col list">
				<view class="flex-col list-item" :key="i" v-for="(item, i) in list" @click="goVideo(i)">
					<view class="flex-row">

						<image :src='item.inspectionManaddress' class="image_1" />
						<text class="text_1">{{item.name}}</text>
					</view>
					<text class="text_3">{{item.processDetails}}</text>
					<view class="flex-col items-center group_1">

						<image class="image_3"
							:src="item.videos+ '?spm=qipa250&x-oss-process=video/snapshot,t_7000,f_jpg,w_800,h_600,m_fast'">
						</image>


						<image :src="imgUrl+'16557867901398396466.png'" class="image_5" />
					</view>
					<text class="text_5">{{item.createDate}}</text>

				</view>
			</view>
		</scroll-view>
		<view v-else>
			<u-empty mode="data" width="250" marginTop="50%" textSize="30rpx"
				icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
		</view>
		<u-loadmore v-show="more" height="100" fontSize="26" :status="status" />
	</view>
	</view>
</template>

<script>
	import tools from '@/shop/utils/tools.js'
	export default {
		components: {},
		created() {
			this.getPoster();
		},
		data() {
			return {
				more: false,
				imgUrl: this.$IMG_URL,
				status: 'loading',
				msg: "",
				code: "",
				list: [],
				id: '', //巡检形象视频id
				inspectionFrequencyId: '', //巡检形象视频id
				processDetails: '', //项目进度描述
				videos: '', //视频
				createDate: '', //添加日期
				status: '',
				inspectionManId: '', //巡检员id
				address: '', //巡检员头像
				name: '', //巡检员昵称
				num: '', //顺序
				family: {},
				inspectionManaddress: '', //巡检头像
				param: {
					pageSize: 10,
					pageNum: 1
				},
			};
		},
		onLoad() {
			this.getFamily()
			this.getlist()
		},
		methods: {
			getFamily() {
				this.$http('lhouse.query').then(r => {
					if (r.code == 200) {

						this.family = r.data.project;


					}
				});
			},
			async getlist(type = 0) {
				let res = await this.$http('queryInspectionVideos', this.param);
				if (res.code == 200) {
					if (type == 0) {
						// 	res.data.forEach(async item=>{
						// 		item.poster=await this.getPoster(item.videos);

						// 	   })
						this.list = res.data
						console.log(this.list);
					} else {
						if (res.data.length > 0) {
							//    	res.data.forEach(async item=>{
							// 	item.poster=await this.getPoster(item.videos);
							// 	console.log(item.poster);

							//    })
							this.list = this.list.concat(res.data);
							this.status = "loadmore";
						} else {
							this.status = "nomore";

						}

					}

				} else {
					this.$u.toast(res.msg);
				}
			},
			getPoster(url) {
				return tools.getVideoBase64(url)
			},
			goVideo(i) {
				console.log(this.list[i]);
				uni.navigateTo({
					url: "/pages/video/video?url=" + this.list[i].videos
				})
			},
			loadmore() {
				this.status = "loading";
				this.more = true;
				this.param.pageNum++;
				this.getlist(1)
			},
		},
	};
</script>

<style scoped lang="scss">
	.list-item {
		padding: 32rpx 24rpx 34rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.text_3 {
		margin-top: 29rpx;
		align-self: flex-start;
		color: #191919;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.group_1 {
		margin-top: 34rpx;
		border-radius: 16rpx;
		position: relative;
	}

	.text_5 {
		margin-left: 8rpx;
		margin-top: 27rpx;
		align-self: flex-start;
		color: #666666;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.image_1 {
		border-radius: 32rpx;
		width: 64rpx;
		height: 64rpx;
	}

	.text_1 {
		margin-left: 24rpx;
		margin-top: 10rpx;
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_3 {
		border-radius: 16rpx;
		width: 654rpx;
		height: 328rpx;
	}

	.image_5 {
		width: 80rpx;
		height: 80rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.page {
		background-color: #f6f7f9ff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100vh;
	}

	.list {
		padding: 20rpx 24rpx 48rpx;
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.list-item:last-of-type {
		margin-top: 20rpx;
	}
</style>
